<template>
<div class="picture-upload">
  <a-upload
    list-type="picture-card"
    :show-upload-list="false"
    :before-upload="beforeUpload"
    :custom-request="handleUpload"
  >
    <img v-if="picture?.url" :src="picture?.url" alt="avatar" />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">点击或拖拽上传图片</div>
    </div>
  </a-upload>
</div>
</template>

<script lang="ts" setup>
import {message, UploadProps} from 'ant-design-vue';
import {LoadingOutlined, PlusOutlined} from '@ant-design/icons-vue';
import {defineProps, ref} from 'vue';
import {uploadPictureUsingPost} from "@/api/fileController";


interface Props {
  picture?: API.PictureVO;
  onSuccess?: (newPicture: API.PictureVO) => void;
}
const props = defineProps<Props>();
const fileList = ref([]);
const loading = ref<boolean>(false);
/**
 * 上传前的校验函数
 * @param file
 */
const beforeUpload = (file:UploadProps['fileList'][number])=>{
      //校验上传图片格式
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        message.error('不支持上传该格式的图片，推荐jpg或png');
      }
      //校验上传图片大小
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error('不能上传超过2M的图片');
      }
      return isJpgOrPng && isLt2M;
    }

    /**
     * 上传图片
     * @param file
     */
    const handleUpload = async ({file}:any) => {
      loading.value = true;
      try {
        const params = props.picture ?{id:props.picture.id }:{};
        const res = await uploadPictureUsingPost(params,{},file)
        if (res.data.code === 0 && res.data.data){
          message.success('图片上传成功')
          //将上传成功的图片信息传递给父组件
          props.onSuccess?.(res.data.data);
          console.log('pictureUpload,'+params);
        }else {
          message.error('图片上传失败，'+res.data.message)
        }
      }catch (error){
        console.log('图片上传失败，'+error)
        message.error('图片上传失败，'+error.message)
      }finally {
        loading.value = false;
      }
    };
</script>
<style scoped>
.picture-upload :deep(.ant-upload) {
  width: 100% !important;
  height: 100% !important;
  min-height: 152px;
  min-width: 152px;
}

.picture-upload img {
  max-width: 100%;
  max-height: 480px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

</style>
